<template>
  <div class="box">
    <div class="box_titile">
        <h4>最新资讯</h4>
    </div>
    <ul>
        <li v-for="(item,index) in list" :key="index">
            <div class="zx">
                <div class="zx_left"><img :src="item.imgSrc" alt=""></div>
                <div class="zx_right">
                    <div class="zx_right_top">{{item.title}}</div>
                    <div class="zx_right_botton">
                        <span>{{item.from}}</span><span>{{item.date}}</span>
                    </div>
                </div>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import { news } from '@/api/news'
export default {
  name: 'NewS',
  data () {
    return {
      list: []
    }
  },
  methods: {
    async GetNews () {
      const res = await news()
      console.log('res', res)
      this.list = res.body
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].imgSrc = `http://124.223.73.204:8080${this.list[i].imgSrc}`
      }
    }
  },
  mounted () {
    this.GetNews()
  }
}
</script>

<style scoped lang='less'>
.box{
    width:356px;
    margin:0 auto;
    .box_titile{
        height: 30px;
        h4{
            line-height: 40px;
        }
    }
}
ul{
    width: 100%;
    li{
        width: 100%;
    }
}
.zx{
    width: 100%;
    height: 120px;
    padding:15px 10px 15px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zx_left img{
    width: 120px;
    height: 90px;
}
.zx_right{
    width: 356-120px;
    height: 90px;
    // background-color: yellow;
    padding-left:10px;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.zx_right_top{
    width: 100%;
    height: 50%;
    // background-color: red;
    font-weight: 700;
}
.zx_right_botton{
    width: 100%;
    height: 50%;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
}
</style>
